<template>
  <div>
    <div
      v-for="item in config"
      :key="item.title"
    >
      <h1 :class="`${item.class} common`">
        {{ item.title }}
      </h1>
      <div
        v-for="it in item.content"
        :key="it.text"
      >
        <h3 v-if="it.type === 'h3'">
          {{ it.text }}
        </h3>
        <p v-if="it.type === 'p'">
          {{ it.text }}
        </p>
        <el-link
          v-if="it.type === 'link'"
          :to="it.link"
        >
          {{ it.text }}
        </el-link>
      </div>
    </div>
  </div>
</template>

<script>
import config from '@/config/aboutConf.json';
export default {
  name: 'About',
  data() {
    return {config};
  }
};
</script>

<style scoped>
.common {
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
}
.em-orange {
  background-image: linear-gradient(155deg, #FFA8A8 10%, #FCFF00 100%);
}
.em-green {
  background-image: linear-gradient(155deg, #F0FF00 10%, #20c4ff 100%);
}
.em-blue {
  background-image: linear-gradient(155deg, #affeff 10%, #130CB7 100%);
}
</style>
